html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 1280px;
}

.img-list {
    position: absolute;
    display: flex;
    justify-content: space-around;
    width: 100%;
    bottom: 5%;
    min-width: 1280px;
}
.img-list .img-item {
    flex-flow: 1;
    width: 240px;
    height: 150px;
    border: 3px solid #fff;
    overflow: hidden;
    cursor: pointer;
}
.img-item img {
    width: 100%;
    height: 100%;
}
.animation1 {
    animation: animation1 .5s ease-out;
}
.animation2 {
    animation: animation2 .5s ease-out;
}
.animation3 {
    animation: animation3 1s ease-in;
}
.animation4 {
    animation: animation4 1s ease-out;
}
.animation5 {
    animation: animation5 .7s ease-in-out;
}

@keyframes animation1 {
    0% {
        left: -500px;
    }
    100% {
        left: 0;
    }
}
@keyframes animation2 {
    0% {
        left: 350px;
    }
    100% {
        left: 0;
    }
}
@keyframes animation3 {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes animation4 {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes animation5 {
    0% {
        transform: rotate(-360deg) scale(0.1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* loading */
.loading {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    z-index: 10;
}

/* 设置大盒子水平垂直居中 */
.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
/* 设置球球动画 */
@keyframes qiuqiu {
    100% {
        top:25px;
    }
}
/* 设置球的属性 */
.qiu {
    position: relative;
    top: -25px;
    float: left;
    margin: 10px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #4285f4;
    animation: qiuqiu .4s ease-in-out infinite alternate;
}
/* 分别为后面的小球设置颜色和延时 */
.qiu:nth-child(2) {
    animation-delay: 0.1s;
    background-color: #0f9d58;
}
.qiu:nth-child(3) {
    animation-delay: 0.2s;
    background-color: #f4b400;
}
.qiu:nth-child(4) {
    animation-delay: 0.3s;
    background-color: #db4437;
}